<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词交互测试x1u1</title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, sans-serif;
        display: block;
        overflow-y: scroll;
    }
    #content {
        text-align: center;
        width: 100%;
        padding: 20px;
    }
    #word {
        font-family: Arial-Black, sans-serif;
        font-size: 36px;
        color: blue;
        margin-top: 20px;
    }
    .option {
        margin: 5px;
        padding: 10px;
        border: 2px solid #007BFF;
        border-radius: 5px;
        color: black;
        background-color: white;
        font-size: 16px;
        cursor: pointer;
        width: 300px;
        display: inline-block;
        text-align: left;
        box-sizing: border-box;
    }
    .option:hover {
        background-color: #f0f0f0;
    }
    #optionsContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    #progressBar {
        width: 90%;
        background-color: #ddd;
        margin: 20px 0;
    }
    #progress {
        height: 20px;
        background-color: #4CAF50;
        width: 0%;
    }
    #stats {
        margin-top: 10px;
    }
    #incorrectWords {
        margin-top: 20px;
        font-size: 16px;
        color: red;
        width: 100%;
        text-align: left;
        padding: 0 20px;
    }
    @media (max-width: 600px) {
        .option {
            width: 80%;
        }
        #optionsContainer {
            flex-direction: column;
        }
    }
</style>
<script>
const words = {
    "mood": "情绪，心情，气氛，氛围",
    "combination": "结合体，联合体，联合，混合",
    "do_the_trick": "奏效，起作用，达到目的",
    "creamy": "含奶油的；像奶油的，光滑细腻的；淡黄色的",
    "flavour": "味，味道；特点，特色. 给…调味，加味于",
    "greedily": "贪婪地，贪心地",
    "gently": "轻柔地，温和地",
    "dessert": "（饭后）甜点，甜食",
    "association": "联想，联系；协会，社团；联合，交往",
    "vary": "（根据情况）变化，变更；相异，不同. 变更，改变",
    "link": "联系，相关联；把…连接起来. 联系，连接；关系，纽带；链接",
    "emotion": "情感，强烈的感情，激情，情绪",
    "saucer": "碟状物，茶碟，茶托",
    "vinegar": "醋",
    "native": "出生于某国（或某地）的人；本地人. 出生地的；本地的；土著的；土产的",
    "salty": "咸的，含盐的",
    "sour": "酸的，有酸味的；馊的. （使）变坏，变味，酸腐",
    "cry_out_for": "迫切需要",
    "relieve": "解除，减轻；缓和，缓解",
    "bond": "纽带，联系；连接，结合",
    "security": "安全；保护措施；保安部门；担保，保证",
    "generate": "产生，引起",
    "calorie": "卡，卡路里；千卡",
    "digest": "消化；吸收；整理",
    "lower": "降低，减少；把…放低，使…降下. 下面的；在底部的；低洼的",
    "cycle": "循环；自行车，摩托车. 骑自行车",
    "enhance": "提高，增强",
    "throw_oneself_into": "投身于，热衷于",
    "boil": "用沸水煮；（使）沸腾",
    "fry": "油炸，油煎",
    "steak": "牛排；肉排，肉块",
    "pan": "平锅，平底锅",
    "impress": "使钦佩，给…留下深刻印象，使意识到",
    "buffet": "自助餐",
    "bay": "（海或湖的）湾",
    "scenery": "风景，景色；舞台布景",
    "bet": "打赌，赌注；预计，估计. 下赌注，打赌；敢说",
    "atmosphere": "气氛，氛围；大气；气体；空气",
    "out_of_this_world": "好（或美等）得不得了，非凡，呱呱叫",
    "version": "变体，变种；说法；版本",
    "filling": "（糕点等的）馅",
    "elderly": "年纪较大的，上了年纪的",
    "bake": "烘烤；烤硬",
    "flour": "面粉",
    "adorable": "可爱的，讨人喜爱的",
    "mild": "不浓的，淡味的；暖和的；温和的，不严重的",
    "tiramisu": "提拉米苏",
    "bakery": "面包（糕饼）店",
    "layer": "层，层次，表层",
    "cheese": "干酪，奶酪",
    "bitter": "味苦的；激烈的；令人难过的；严寒的",
    "cream": "奶油，乳脂；护肤霜",
    "ingredient": "材料，成分；因素，要素",
    "loose": "不受约束的；未固定牢的；零散的；宽松的；疏松的",
    "let_sth_loose": "释放；放任",
    "chilli": "辣椒",
    "pepper": "甜椒；胡椒粉",
    "Sichuan_pepper": "花椒",
    "onion": "洋葱，葱头",
    "spring_onion": "小葱，香葱",
    "damp": "潮湿的，湿气重的",
    "foggy": "有雾的，雾茫茫的",
    "dynasty": "朝，代；王朝",
    "expand": "增加，扩大；扩展，发展（业务）；详谈，详述",
    "multiple": "数量多的，多样的",
    "sauce": "调味汁，酱",
    "plain": "朴素的，简单的；清楚的. 平原",
    "slice": "薄片，片；部分，份额. 把…切成片；切开，割破",
    "chef": "主厨，厨师",
    "property": "性质，特性；所有物，财产；不动产",
    "appropriate": "合适的",
    "estimate": "估计，估价",
    "consume": "吃，喝，饮；消耗，耗费（尤指燃料、能量或时间）",
    "hit_the_spot": "使人满意，正合需要",
    "Cantonese": "广东人（或文化）的，粤语的. 广东人；粤语",
    "dim_sum": "点心",
    "essential": "必不可少的；本质的，基本的",
    "innovation": "创造，创新；新思想，新方法",
    "concept": "概念，观念",
    "stimulate": "促进，激发；刺激，使兴奋",
    "appetite": "食欲，胃口；强烈欲望",
    "delicate": "精致的，精细的，精密的；易损的，易碎的，脆弱的",
    "emphasis": "强调，重点",
    "steam": "蒸，散发蒸汽. 水蒸气；蒸汽动力；水汽",
    "gram": "克",
    "cabbage": "甘蓝，卷心菜",
    "wrapper": "（食品等的）包装材料，包装纸",
    "mixture": "混合物；混合，结合",
    "edge": "边，边缘；刀口",
    "apart": "成碎片；分开；相隔",
    "fall_apart": "破碎，破裂；崩溃"
};

let keys = Object.keys(words);
let totalWords = keys.length;
let correctCount = 0;
let wordsAnswered = 0;
let incorrectWords = [];

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

shuffle(keys);

function generateQuestion() {
    if (keys.length === 0) {
        document.getElementById('word').textContent = "Quiz Completed!";
        document.getElementById('optionsContainer').style.display = "none";
        return;
    }
    const questionIndex = keys.pop();
    const questionWord = questionIndex;
    const correctAnswer = words[questionWord];
    let options = [];
    let tempKeys = Object.keys(words).filter(key => key !== questionWord);
    shuffle(tempKeys);
    tempKeys = tempKeys.slice(0, 3);
    options = tempKeys.map(key => words[key]);
    options.push(correctAnswer);
    shuffle(options);
    document.getElementById('word').textContent = questionWord.replace('_', ' ');
    document.getElementById('optionA').textContent = 'A: ' + options[0];
    document.getElementById('optionB').textContent = 'B: ' + options[1];
    document.getElementById('optionC').textContent = 'C: ' + options[2];
    document.getElementById('optionD').textContent = 'D: ' + options[3];
    document.getElementById('correct').value = options.indexOf(correctAnswer);
    updateProgress();
}

function checkAnswer(selected) {
    const correct = document.getElementById('correct').value;
    const selectedButton = document.querySelectorAll('.option')[selected];
    if (selected === parseInt(correct)) {
        selectedButton.style.backgroundColor = 'lightgreen';
        document.getElementById('match').play();
        correctCount++;
    } else {
        selectedButton.style.backgroundColor = 'lightcoral';
        document.getElementById('unmatch').play();
        const incorrectWord = document.getElementById('word').textContent.trim();
        incorrectWords.push(incorrectWord + ': ' + words[incorrectWord.replace(' ', '_')]);
        updateIncorrectWords();
    }
    setTimeout(() => {
        selectedButton.style.backgroundColor = 'white';
        wordsAnswered++;
        updateStats();
        generateQuestion();
    }, 1000);
}

function updateProgress() {
    const progressPercent = ((totalWords - keys.length) / totalWords) * 100;
    document.getElementById('progress').style.width = `${progressPercent}%`;
}

function updateStats() {
    const correctRate = ((correctCount / wordsAnswered) * 100).toFixed(1);
    document.getElementById('stats').textContent = `正确个数: ${correctCount} / ${wordsAnswered} (${correctRate}%)`;
}

function updateIncorrectWords() {
    const incorrectWordsContainer = document.getElementById('incorrectWords');
    incorrectWordsContainer.innerHTML = '';
    incorrectWords.forEach(word => {
        const wordElement = document.createElement('div');
        wordElement.textContent = word;
        incorrectWordsContainer.appendChild(wordElement);
    });
}

document.addEventListener('DOMContentLoaded', generateQuestion);
</script>
</head>
<body>
<div id="content">
    <h1>单词交互测试x1u1</h1>
    <p id="word"></p>
    <div id="optionsContainer">
        <button id="optionA" class="option" onclick="checkAnswer(0)"></button>
        <button id="optionB" class="option" onclick="checkAnswer(1)"></button>
        <button id="optionC" class="option" onclick="checkAnswer(2)"></button>
        <button id="optionD" class="option" onclick="checkAnswer(3)"></button>
    </div>
    <div id="progressBar">
        <div id="progress"></div>
    </div>
    <div id="stats"></div>
    <input type="hidden" id="correct">
    <div id="incorrectWords"></div>
</div>
<audio id="match" src="match.wav"></audio>
<audio id="unmatch" src="unmatch.wav"></audio>
</body>
</html>
